<template>
  <view class="advertise" @click="navigateTo({url: '/pagesB/advertiseChild/prizePool'})">
  <view class="timePosab fz-12" v-if="endTimeObj.code == 201">
      第{{info.periods}}期已结束
    </view>
    <view class="timePosab fz-12" v-else>
      <text class="u-p-r-8">第{{info.periods}}期</text>
      <text class="u-p-r-8" v-if="endTimeObj.day">{{endTimeObj.day}}天</text>
      <text>{{endTimeObj.hour}}:{{endTimeObj.minute}}:{{endTimeObj.second}}.</text>
      <u-count-to
      :start-val="9"
      :end-val="0" 
      :duration="1000" 
      :use-easing="false" 
      color="#FFF0C6" 
      font-size="24" 
      ref="countTo" 
      @end="_countToFn">
      </u-count-to>
      <text class="u-p-l-8">后失效</text>
    </view>
    <view class="bonus">
      <view class="fz-12">奖金已累计:</view>
      <view class="fz-18 fw6 u-p-t-8"><text class="fz-12">￥</text>{{info.totalBonus || 0}}</view>
    </view>
  </view>
</template>

<script>
import mini from "@/api/mini.js";
import { currentTime,getRemainderTime } from "@/utils/formTime.js";
export default {
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      timer: null, // 定时器
      endTimeObj: {
        day: 0,
        hour: "00",
        minute: "00",
        second: "00"
      }
    }
  },
  created(){
    if (this.timer) { //这一段是防止进入页面出去后再进来计时器重复启动
      clearInterval(this.timer); 
    }
    
    this.endTimeObj = this.getRemainderTime(this.currentTime(),this.info.endTime)
    this.timer = setInterval(() => {
      this.endTimeObj = this.getRemainderTime(this.currentTime(),this.info.endTime)
    }, 1000);
    
  },
  methods:{
    currentTime, // 获取当前时间
    getRemainderTime, // 计算两个时间的时间差
    _countToFn(){
      this.$refs.countTo.start()
    }
  }, 
  beforeDestroy(){
    if (this.timer) {
      clearInterval(this.timer); 
    }
  },
}
</script>

<style lang="scss" scoped>
.advertise{
  margin-top: 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 240rpx;
  background-image: url('https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/prizePool/advertiseBanner.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .timePosab{
    color: #FFF0C6;
    border-radius: 16rpx 0;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    line-height: 64rpx;
    padding: 0 32rpx;
    display: flex;
  }
  .bonus{
    color: #FFF;
    padding: 0 0 32rpx 32rpx;
  }
}
</style>